<template>
     <el-dialog :title="title" :data="visible" :visible.sync="visible" :show-close="false" width="550px" :modal="true"
                :close-on-click-modal="false"  :close-on-press-escape="false"  top="50px" style="margin-bottom:20px">
       <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
        <el-form :model="propsData"  :rules="rules" ref="propsData" label-width="100px">
          <el-form-item label="识别码" prop="room_no">
            <el-input v-model="propsData.sign_no" type="text" disabled="true" style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="房间门号" prop="room_no">
            <el-input v-model="propsData.room_no" type="text" placeholder="请输入房间门号" style="width: 90%;"></el-input>
          </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="propsData.status">  <!--2:维护,1正常,3:作废-->
                    <el-radio label="1">正常</el-radio>
                    <el-radio label="2">维护</el-radio>
                    <el-radio label="3">作废</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading"  @click="submitForm">保 存</el-button>
        </div>
      </el-dialog>
</template>


<script>
import * as api from '@/api/main-api' // API
export default {

  name: 'editSymbol',

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: Object
  },

  data() {
    return {
      loading: false,
      rules: {},
      title: '编辑房间'
    }
  },

  methods: {
    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.$emit('update:visible', false)
    },

    // 表单提交
    submitForm() {
      // 数据赋值
      var postData = {
        status: this.propsData.status,
        room_no: this.propsData.room_no,
        id: this.propsData.id
      }
      // 数据开始提交
      this.$refs.propsData.validate(valid => {
        if (valid) {
          this.loading = true
          this.postEditdUrl(postData)
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // edit-提交数据
    postEditdUrl(data) {
      api.editSymbolApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    }

  }
}
</script>